Mastering CSS Grid by Pascal Thormeier

Author:Pascal Thormeier
Language: eng
Format: epub
Publisher: Packt Publishing Pvt Ltd
Published: 2023-05-16T00:00:00+00:00

Figure 5.2 – The unaligned media object

The result is what we would expect: the content div functions as a block element that spans the entire width, pushing itself to the following line and rendering the entire element vertically. To rebuild the Bootstrap example, we must move the content to the right of the image.

Let’s first apply CSS Grid to it to see how it behaves. We’ll need two columns, one of size auto and one of size 1fr, so the column containing the image does not grow beyond its content size:

.media-object { /* Previous declarations omitted for brevity */ display: grid; grid-template-columns: auto 1fr; }

This code does what we want, as shown in the following figure:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.